<template>
  <div class="chat-content">
    <!-- recordContent 聊天记录数组-->
    <div v-for="(item, index) in records" :key="index">
      <!-- 对方 -->
      <div v-if="!item.mineMsg" class="word">
        <img :src="item.headUrl" />
        <div class="info">
          <p class="time">
            <b>{{ item.nickName }}</b>
            {{ item.timestamp }}
          </p>
          <div class="info-content">{{ item.contactText }}</div>
        </div>
      </div>
      <!-- 我的 -->
      <div v-else class="word-my">
        <div class="info">
          <p class="time">
            <b>{{ item.nickName }}</b>
            {{ item.timestamp }}
          </p>
          <div class="info-content">{{ item.contactText }}</div>
        </div>
        <img :src="item.headUrl" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      records: {
        type: Array,
        default() {
          return []
        },
      },
    },
  }
</script>

<style lang="scss" scoped>
  .chat-content {
    width: 100%;
    padding: 8px 20px 0 20px;
    .word {
      display: flex;
      margin-bottom: 12px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .info {
        margin-left: 10px;
        .time {
          height: 20px;
          margin: -5px 0 0 0;
          font-size: 12px;
          line-height: 20px;
          color: rgba(51, 51, 51, 0.8);
        }
        .info-content {
          position: relative;
          padding: 10px 12px;
          margin-top: 8px;
          font-size: 12px;
          background: #f0f0f0;
          border-radius: 4px;
        }
        //小三角形
        .info-content::before {
          position: absolute;
          top: 8px;
          left: -8px;
          content: '';
          border-top: 8px solid transparent;
          border-right: 10px solid #f0f0f0;
          border-bottom: 8px solid transparent;
        }
      }
    }

    .word-my {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .info {
        width: 90%;
        margin-left: 10px;
        text-align: right;
        .time {
          height: 20px;
          margin: -5px 10px 0 0;
          font-size: 12px;
          line-height: 20px;
          color: rgba(51, 51, 51, 0.8);
        }
        .info-content {
          position: relative;
          float: right;
          max-width: 70%;
          padding: 10px 12px;
          margin: 8px 10px 0 0;
          font-size: 12px;
          color: #fff;
          text-align: left;
          background: #1890ff;
          border-radius: 4px;
        }
        //小三角形
        .info-content::after {
          position: absolute;
          top: 8px;
          right: -8px;
          content: '';
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-left: 10px solid #1890ff;
        }
      }
    }
  }
</style>
